<template>
     <div class="item">
           <div class="items">
              <i class="message"></i>
             聊天
           </div>
           <div class="items ">
               <i class="contact"></i>
               联系人
           </div>
           <div class="items ">
              <i class="find"></i>
              发现
           </div>
           <div class="items ">
           <i class="me"></i>
              我的
              </div>
     </div>

</template>

<script>
export default {
  name: 'Footer',

}
</script>

<style scoped>
   .item{
        height: 60px;
        background: #fff;
        position: fixed;
        bottom: 0;
        width: 100%;
        border-top: 1px  solid #a8a8ae;
        margin: 0 auto;

        z-index: 888;

   }
   .item .items{
      width: 25%;
      float: left;
      font-size: 12px;
   }
   .item .items i{
      display: block;
     width: 25px;
     height: 25px;
     margin: 5px auto;
     background-size: 100% 100%;
   }
   .message{
      background: url('../assets/images/message.png');

   }
   .find{
       background: url('../assets/images/find.png');
   }
   .me{
     background: url('../assets/images/me.png');
   }
   .contact{
     background: url('../assets/images/contact.png');
   }

</style>
